iT邦幫忙

2023 iThome 鐵人賽

DAY 5
1
自我挑戰組

從零開始Vue(View)系列 第 5

[Day5]Vue.js生命週期

  • 分享至 

  • xImage
  •  

程式語言中有輸出、輸入、迴圈、事件及條件等基本操作,先了解到有這些東西,會在之後學習更深入的內容,今天就先把重點放在生命週期上。

Vue組件的生命週期是指組件從創建到銷毀的整個過程,Vue為開發者提供了一系列的鉤子函數(hooks),可以在組件生命週期的不同階段執行特定的操作。
以下是常見的生命週期鉤子函數及它對應的階段:
https://ithelp.ithome.com.tw/upload/images/20230909/201611954QJA4YjXOA.png

創建階段
這個階段介紹了組件實例的創建過程。Vue會從組件選項中讀取配置,以及組件初始化初始化的數據和生命週期創建方法。以下是這個階段的主要鉤子函數:

  • beforeCreate: 在實例創建之前調用。
  • created:在實例中創建完成後調用。
  • beforeMount: 在組件掛載到 DOM 之前調用。
  • mounted: 在組件掛載到 DOM 後調用。

更新階段
這個階段介紹了組件數據的更新過程。在這個階段,Vue會檢測到組件數據的變化,並進行相應的DOM更新。以下是更新階段的主要鉤子函數:

  • beforeUpdate: 在組件更新之前調用。
  • updated:在組件更新完成後調用。

銷毀階段
這個階段講述了組件實例的回調過程。Vue 會組件清理實例,解除事件綁定和其他資源的引用。以下是銷毀階段的主要鉤子函數:

  • beforeUnmount: 在組件卸載之前調用。
  • unmounted: 在組件卸載完成後調用。

上一篇
[Day4]Hello Vue
下一篇
[Day6]基礎綁定及v-bind指令
系列文
從零開始Vue(View)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言